<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box{
            width: 1000px;
            border: 1px solid #ccc;
            overflow: hidden;
            height: 110px;
            margin: 50px auto;
            white-space: nowrap;
            position: relative;
        }
        .con1{
            width: 1000px;
            height: 110px;
            overflow: hidden;
            position: absolute;
            left: 0;
        }
        .con2{
            position: absolute;
            overflow: hidden;
            opacity: 0;
        }
        li{
            list-style: none;
            float: left;
        }
</style>
<body>
        <div class="box">
                <div class="con1">
                    <li><img src="./img/1.png" alt=""></li>
                    <li><img src="./img/1.png" alt=""></li>
                    <li><img src="./img/1.png" alt=""></li>
                    <li><img src="./img/1.png" alt=""></li>
                    <li><img src="./img/1.png" alt=""></li>
                    <li><img src="./img/1.png" alt=""></li>
                </div>
                <div class="con2"></div>
            </div>
    
</body>
<script>
    window.onload = function(){
            var cont = 5; //时间间隔
            var box = document.getElementsByClassName("box")[0];
            var con1 = document.getElementsByClassName("con1")[0];
            var con2 = document.getElementsByClassName("con2")[0];
            con2.innerHTML = con1.innerHTML;
            function scroll(){
                if(con1.scrollLeft >= con2.offsetWidth - box.offsetWidth){　　//利用滚动差当滚动不动时重置为0
                    con1.scrollLeft = 0;
                }else{
                    con1.scrollLeft += 1;
                }
            }
            var timer = setInterval(scroll,cont);
            box.onmouseover = function(e){
                clearInterval(timer);
            }
            box.onmouseout = function(e){
                timer = setInterval(scroll,cont);
            }
        }
</script>
</html>